<template>
  <div>
    <el-alert title="corpid在企业微信后台-->我的企业-->企业信息-->企业ID里" type="success"> </el-alert>
    <el-card body-style="padding: 0">
      <el-form
        ref="wechatEnterpriseQueryForm"
        :model="wechatEnterpriseQueryForm"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="enterpriseName">
              <el-input
                v-model="wechatEnterpriseQueryForm.enterpriseName"
                placeholder="请输入企业名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-form-item>
              <el-button
                type="primary"
                size="small"
                @click="submitQueryForm()"
                icon="el-icon-search"
              >
                查询</el-button
              >
              <el-button
                type="primary"
                size="small"
                plain
                @click="resetQueryForm()"
                icon="el-icon-refresh"
              >
                重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <el-button
        type="primary"
        size="small"
        style="margin: 0 0 10px 20px"
        icon="el-icon-plus"
        @click="handleAdd('新增地址')"
        >新增</el-button
      >
      <el-table
        :data="tableData"
        border
        default-expand-all
        stripe
        style="width: 100%; margin-bottom: 20px"
      >
        <el-table-column
          prop="enterprise"
          label="企业名称"
          width="400"
          align="center"
        />
        
        <el-table-column
          prop="corpid"
          label="corpid"
          width="700"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width=""
          align="center"
        />
        <el-table-column label="操作" width="90" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.$index, scope.row, '修改企业')"
            />
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="handleDelete(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      :before-close="beforeDialogClose"
    >
      <el-form
        :model="dialogForm"
        ref="dialogForm"
        :rules="dialogFormRules"
        label-width="20%"
      >
        <el-row :gutter="20">
          <el-form-item label="企业名称" prop="enterprise">
            <el-input
              v-model="dialogForm.enterprise"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="corpid" prop="corpid">
            <el-input v-model="dialogForm.corpid" autocomplete="off"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitDialogForm()" size="mini" type="primary"
          >确 定</el-button
        >
        <el-button @click="handleCloseDialog" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEnterprise,
  addEnterprise,
  updateEnterprise,
  deleteEnterprise,
} from "../../api/wechat/wechat_enterprise.js";
import axios from "axios";
import MixinCUD from "@/components/MixinCUD";

export default {
  name: "WechatEnterprise",
  mixins: [MixinCUD],
  data() {
    return {
      tableData: [],
      queryFormRefName: "wechatEnterpriseQueryForm",
      wechatEnterpriseQueryForm: {
        enterpriseName: "",
      },
      dialogTitle: "",
      dialogFormVisible: false,
      dialogTitle: "",
      dialogRefName: "dialogForm",
      dialogForm: {
        id: null,
        enterprise: "",
        corpid: "",
      },
      dialogFormRules: {
        enterprise: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        corpid: [{ required: true, message: "请输入corpid", trigger: "blur" }],
      },
    };
  },
  methods: {
    updateData() {
      updateEnterprise(this.dialogForm).then((res) => {
        this.$message({ message: res.data, type: "success" });
        this.submitQueryForm(); //修改之后，重新查询table
        this.handleCloseDialog();
      });
    },
    addData() {
      addEnterprise(this.dialogForm).then((res) => {
        this.$message({ message: res.data, type: "success" });
        this.submitQueryForm(); //新增之后，重新查询table
        this.handleCloseDialog();
      });
    },
    deleteData(row) {
      this.$confirm("确定删除企业:[" + row.enterprise + "]?").then((_) => {
        deleteEnterprise(row.id)
          .then((res) => {
            this.submitQueryForm(); //删除之后，重新查询table
            this.$message({ message: res.data, type: "success" });
          })
          .catch((err) => {
            this.$message({ message: err.message, type: "error" });
          });
      });
    },
    getData() {
      getEnterprise(this.wechatEnterpriseQueryForm).then(
        (res) => {
          this.setData(res);
        }
      );
    },
    setData(pageinfo) {
      if (pageinfo.isok) {
        this.tableData = pageinfo.data;
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    axios
      .all([
        getEnterprise(
          { enterpriseName: "" }
        ),
      ])
      .then(
        axios.spread(function(res1) {
          next((vm) => {
            vm.setData(res1);
          });
        })
      );
  },
};
</script>

<style scoped>
.db-document-frame {
  margin-top: 40px;
  background-color: transparent;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
}
.el-form {
  margin-top: 20px;
}
</style>
